<template>
  <div class="merchant alltable">
    <div class="tabbar">
      <div class="let">
        <DatePicker
          type="date"
          placement="bottom-end"
          v-model="data_axios.startday"
          value = 'yyyy-MM-dd'
          placeholder="请选择开始日期"
          style="width: 130px"
        ></DatePicker>&nbsp;
        <DatePicker
          type="date"
          placement="bottom-end"
          v-model="data_axios.endday"
          placeholder="请选择结束日期"
          style="width: 130px"
        ></DatePicker>&nbsp;
        
        <Select v-model="data_axios.type" placeholder="类型" class="service" style="width:130px">
          <Option v-for="(item,i) in typelist" :value="item.mid" :key="i">{{ item.cname }}</Option>
        </Select>&nbsp;
        
        <Input
          prefix="ios-search"          
          v-model.trim="data_axios.selectinfo"
          placeholder="请输入关键字"
          style="width: 200px"
        />
        <Button class="btn_default" @click="search">
          <Icon type="ios-search" size="17" class="icon_wy"/>查询
        </Button>
      </div>
        <div class='rit'>               
                <Button @click="model=true">批量充值</Button>
      </div>
    </div>
    <div class="tabble">
      <div>
        <Table
          :columns="columns"
          :loading="loading"
          height="560"
          :data="data.datas"
          class="sel_table"
        ></Table>
      </div>
    </div>

    <div class="tab_pages">
      <Page
        :total="data.allCount"
        :page-size="data_axios.pagesize"
        :current.sync="data_axios.pagenumber"
        show-total
        @on-change="merchant_data"
      ></Page>
    </div>
    <!-- 批量充值模态框 -->
    <Modal title="充值" v-model="model" class-name="" :mask-closable="false">
        <div>
          <Form  ref="parment_data"  label-position="left" :model="parment_data"  :label-width="100">            
            <FormItem label="模板" >
                <Button @click="findExcel">点击下载excel模板</Button>
            </FormItem>
              <FormItem label="上传文件" >
                <Upload            
                    name='files'
                    :action="upload_url"
                    :format="['xls','xlsx']"
                     :on-success="handleSuccess"
                     :default-file-list=uppp
                    >
                    <Button icon="ios-cloud-upload-outline">点击上传excel文件</Button>                      
                </Upload>
            </FormItem> 
          </Form> 
        </div>
        <div slot="footer">
            <Button size="large"  @click="model=false">关闭</Button>
            <Button type="primary" @click="handleSubmit()" size="large" :loading="add_modal_loading1">确定充值</Button>
        </div>
    </Modal>
    <!-- 充值模态框 -->
    <Modal title="充值" v-model="model2" class-name="" :mask-closable="false">
        <div>
          <Form  ref="parment_data"  label-position="left" :model="parment_data" :rules="ruleValidate1" :label-width="100">            
            <FormItem label="金额" prop="paymentamt">
                <Input v-model="parment_data.paymentamt" placeholder="请输入充值金额"></Input>
            </FormItem>
            <FormItem label="充值说明" prop="body" >
                <Input v-model="parment_data.body" placeholder="请输入充值说明"></Input>
            </FormItem>     
          </Form> 
        </div>
        <div slot="footer">
            <Button size="large"  @click="model2=false">关闭</Button>
            <Button type="primary" @click="handleSubmit1(parment_data)" size="large" :loading="add_modal_loading">确定充值</Button>
        </div>
    </Modal>

  </div>
</template>
<script>
import { setAdmin, setToken, getAdmin } from "../../../utils/auth.js";
import { selectUserInfoList,addOrderByAdmin,addFile,findExcel,batchTopUp} from "../../../apis/api_system.js";
import filter from './../../../filters/filter';
import down from './../../../comm/down'
export default {
  name: "order_list",
  data() {
    return {
      userId: "",
      model:false,
      model2: false,
      upload_url: "",
      uppp:[],
      files:"",
      userName:"",
      add_modal_loading:false,
      add_modal_loading1:false,
      value: "",
      data: {
        allCount: 0,
        currPage: 1,
        datas: [],        
      },
      parment_data:{},
      data_axios: {
        startday: "",
        endday: "",
        pagesize: 10,
        pagenumber: 1,        
        type: "",        
      },
      loading: false,
      
      typelist: [
        {
          mid: 1,
          cname: "学生"
        },
        {
          mid: 2,
          cname: "老师"
        }
      ],
      columns: [
        {
          title: "序号",
          key: "name",
          type: "index",
          width: 50
        },
        {
          title: "名字",
          key: "name"
        },
        {
          title: "类型",
          key: "type",
           width: 100,
          render: (h, params) => {
            const row = params.row;
            const text = row.type === 1 ? "学生" : row.type === 2 ? "老师" : "Fail";
            return <span>{text}</span>;
          }
        }, 
        {
          title: "身份证号 ",
          key: "identity",
          
        },
        {
          title: "余额",
          key: "balance"
        },
        {
          title: "创建时间",
          key: "createdate"
        },
        {
          title: "操作",
          key: "",
          width: 200,
          render: (h, params) => {
            let self = this;
            return (
              <div class="lastcoll"  style="cursor:pointer"> 
                <i
                 
                  on-click={() => self.payment(params)}
                  class="ivu-icon ivu-icon-logo-usd"
                  title="充值"
                >
                  充值
                  
                </i>               
              </div>
            );
          }
        }
               
      ],
      ruleValidate1: {
      //   不能为空
      paymentamt: [
          { required: true, message: '充值金额不能为空', trigger: 'change' }
      ],
      body: [
          { required: true, message: '充值说明不能为空', trigger: 'change' },
          
      ],
    }
      
    };
  },
  
  mounted() {    
    let info = getAdmin();
    this.userId = info.id;
    this.userName = info.name; 
    this.selectUserInfoList(this.data_axios);
    this.upload_url = addFile;    
  },
  methods: { 
    //   获取订单列表
    selectUserInfoList(info) {     
        this.loading = true; 
       if(this.data_axios.startday!=''){
          this.data_axios.startday =  filter.FileterDate(this.data_axios.startday);
       }
       if(this.data_axios.endday!=''){
          this.data_axios.endday =  filter.FileterDate(this.data_axios.endday);
       }      
      let data = JSON.stringify({
        requestString: JSON.stringify(info),
        userId: this.userId,
        fullname: "用户管理"
      });
      selectUserInfoList(data)
        .then(({ returnString, code, disp ,count}) => { 
          this.loading = false;
          if (code == 200) {    
            //  console.log(JSON.parse(returnString));
            this.data.datas = JSON.parse(returnString);
            this.data.allCount = count;
            // console.log(this.data.allCount)
          } else {            
            this.$Message.warning(disp);
          }
        })
        .catch(err => {});
    },
    //分页改变
    merchant_data() {
       this.selectUserInfoList(this.data_axios);
    },
    //   搜索
    search() {
      this.data_axios.pagenumber=1;
      this.selectUserInfoList(this.data_axios);
    },
    // 充值模态框打开
    payment(info){
       this.model2=true; 
       this.parment_data.identity = info.row.identity;
       this.parment_data.operatename = this.userName;
    },
    handleSubmit1(){
      this.$refs["parment_data"].validate(valid => {
        if (valid) {
           this.add_modal_loading =true;
           this.addOrderByAdmin();
        }
      });  
    },
    // 管理员给用户充值
    addOrderByAdmin(params) {
      let data = JSON.stringify({
        requestString: JSON.stringify(this.parment_data),
        userId: this.userId,
        fullname: "用户管理"
      });
      console.log(data)
      addOrderByAdmin(data).then(({ returnString, code, disp ,count}) => { 
           this.add_modal_loading =false;
          if (code == 200) {    
             this.$Message.success(disp);
             this.model2 = false;
             this.selectUserInfoList(this.data_axios);
             tis.parment_data={};
          } else {            
            this.$Message.warning(disp);
          }
        })
        .catch(err => {});
    },
    // 获取充值模板
    findExcel(){
      down("模板.xls",findExcel);
    },
    // 上传excel文件成功
    handleSuccess (res, file) {       
        this.files =  JSON.parse(file.response.returnString)[0].url;        
    },
    // 确定充值
    handleSubmit(){
      this.add_modal_loading1= true;
      let data = JSON.stringify({
        requestString: JSON.stringify({
          url:this.files,
          name:this.userName
        }),
        userId: this.userId,
        fullname: "用户管理"
      });
      console.log(data);      
      batchTopUp(data).then(({ returnString, code, disp ,count}) => { 
           this.add_modal_loading1 =false;
          if (code == 200) {
             if(JSON.parse(returnString).url!=''){
                window.location.href=JSON.parse(returnString).url
             }
             this.$Message.success(disp);
             this.model = false;  
             this.uppp=[];        
             this.selectUserInfoList(this.data_axios);             
          } else {            
            this.$Message.warning(disp);
          }
        })
        .catch(err => {});
    }
  }
};
</script>
<style scoped=scoped>
  .lastcoll {
    cursor: pointer;
  }
</style>